扁平化風(fēng)格潮流浩浩蕩蕩，童鞋們周末有時間也來擼一發(fā)，學(xué)習(xí)一下扁平化風(fēng)格icon的設(shè)計思路吧。今天分享的教程是教你創(chuàng)建一枚IOS 7 風(fēng)格的圖標(biāo)，教程不難，熟練的童鞋30分鐘就可以完成咯。好嘞，教程開始！

覺得一枚不過癮的同學(xué)來挑戰(zhàn)這些：

《PS+AI制作精致可愛的毛線風(fēng)格圖標(biāo)》
《在PHOTOSHOP中創(chuàng)建精細(xì)的工具圖標(biāo)》

順便分享小編的PSD → 移步下載

先上效果圖：

挺干凈的，興趣大增有沒有？ 那就開始咯。

Part 1 ：打好地基

Cttrl + N 創(chuàng)建畫布，大小為1024px * 1024px ， 填充背景色為#fcf2da。

然后 → 編輯 → 首選項 → 參考線、網(wǎng)格和切片，設(shè)置如下：

武器已準(zhǔn)備，接下來踏上征程吧！

先創(chuàng)建一個圓角矩形，大小為512px*512px，半徑120px，記住左上角是形狀哦。

搞定后填充顏色#c47420，命名“icon base”

添加內(nèi)陰影，參數(shù)如下：

為它做一個長投影效果，創(chuàng)建一個矩形，填充黑色，大小可以自己調(diào)整，我是寬718.22px和高732.74px，Ctrl + T 變換角度。

添加圖層樣式—— 漸變疊加，參數(shù)如圖，順便把不透明度調(diào)整為30%，填充0%

好了，現(xiàn)在的效果是這樣的：

Part 2 ：創(chuàng)建筆記本

同樣創(chuàng)建圓角矩形，參數(shù)如下：

然后復(fù)制一層，快捷鍵“A”來到選擇工具，減少16px，調(diào)整高度為432px。

完成后繼續(xù)復(fù)制一層，依上高度改為416px，填充顏色改為?# f3f3f3，完成后如圖：

筆記本雛形完成了，現(xiàn)在給它劃線，用直線工具，粗細(xì)的像素調(diào)整為2，填充黑色。

完成后調(diào)整圖層不透明度為20%，筆記本就成型咯。

Part 3：創(chuàng)建鉛筆

創(chuàng)建矩形，大小為192 x 96px，顏色改成?#00da67或者任何你喜歡的顏色。

繼續(xù)創(chuàng)建兩個矩形，高度改為32px，填充黑色，調(diào)整不透明度為25%和10%，整齊列到筆身上，如圖：

現(xiàn)在來創(chuàng)建筆頭，你可以用多邊形工具，雙擊畫布后，參數(shù)設(shè)置如下：

顏色填充為#e39a4d，然后對齊筆身。

現(xiàn)在創(chuàng)建筆尖，如法炮制一個三角形，大小為32x32px，顏色填充為#474f57，移動到筆頭處對齊，創(chuàng)建為剪切蒙版，如圖：

成果快出現(xiàn)咯，現(xiàn)在給它加個橡皮擦。

創(chuàng)建一個圓角矩形，寬高是64x96px，半徑是20px，顏色填充# f78879，命名為“Rubber”

然后創(chuàng)建一個矩形，大小32x96px，填充顏色# d5d5d5，如圖：

為它添加點光，創(chuàng)建一個圓角矩形，大小是10* 40px ，填充白色，不透明度改成30%

好了，現(xiàn)在是給它添加長投影的時間了，創(chuàng)建矩形，大小352x160px，其他的按照前邊的長投影一樣變換角度，添加漸變就大功告成了。

需要下載PSD的同學(xué) → 移步下載

原文地址：graphicsfuel
優(yōu)設(shè)網(wǎng)譯者：程遠(yuǎn)

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，轉(zhuǎn)摘請注明優(yōu)設(shè)網(wǎng)譯文出處，謝謝各位親愛的小編們 : ）

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊：網(wǎng)頁設(shè)計師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計指南http://hao.uisdc.com/ps/。
設(shè)計微博：擁有粉絲量58萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：